<template>
  <el-container class="matter-transact">
    <el-main>
      <div class="matter-transact-msg">
        <el-descriptions title="事项信息" :column="3" border>
          <el-descriptions-item
            label="事项名称"
            label-align="center"
            align="center"
            span="3"
          >{{ msgData.matter.matterName }}</el-descriptions-item>
          <el-descriptions-item
            label="所属部门"
            label-align="center"
            align="center"
          >{{ msgData.matter.dept.deptName }}</el-descriptions-item>
          <el-descriptions-item
            label="事项开始时间"
            label-align="center"
            align="center"
          >{{ moment(msgData.createdDate).format("YYYY-MM-DD HH:mm:ss") }}</el-descriptions-item>
          <el-descriptions-item
            label="当前流程"
            label-align="center"
            align="center"
          >{{ curFlow.customFlowNode.nodeName }}</el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="matter-transact-form" v-if="curFlow.customFlowId">
        <div class="matter-transact-form-title">表单填报</div>
        <CustomFormSubmit ref="CustomFormSubmit" :formId="curFlow.customFlowId"></CustomFormSubmit>
      </div>
    </el-main>
    <el-footer class="matter-transact-operation">
      <el-button type="primary" @click="submit">提交</el-button>
    </el-footer>
  </el-container>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import moment from "moment";
import { ElMessage } from "element-plus";
import CustomFormSubmit from "../components/flow-design/custom-form-submit.vue";
import matterSubmitApi from "@/api/matter-submit.api"
export default defineComponent({
  name: "MatterTransact",
  components: { CustomFormSubmit },
  data() {
    return {
      matterSubmitId: this.$route.query.id as string,
      msgData: {
        createdDate: "",
        matter: {
          matterName: "",
          dept: {
            deptName: ""
          }
        }
      },
      curFlow: {
        id: "",
        customFlowNode: {
          nodeName: ""
        },
        customFlowId: ''
      }
    }
  },
  methods: {
    moment: moment,
    loadData() {
      matterSubmitApi.findOne(this.matterSubmitId).then((res: any) => {
        const { code, content } = res.data;
        if (code === 0) {
          this.msgData = content.result;
          this.curFlow = content.curFlow;
        }
      })
    },
    async submit() {
      const result = await (this.$refs.CustomFormSubmit as any).formSave()
      const customFormSubmitId = result.data.content.id
      const res = await matterSubmitApi.submit({ matterSubmitId: this.matterSubmitId, curFlowId: this.curFlow.id, customFormSubmitId: customFormSubmitId, })
      const { code } = res.data;
      ElMessage({
        message: code === 0 ? "提交成功" : "提交失败",
        type: code === 0 ? "success" : "error",
      });
      if (code === 0) {
        this.$router.back()
      }
    }
  },
  mounted() {
    this.loadData();
  }
})
</script>

<style lang="scss" scoped>
.matter-transact {
  padding: 20px;
  width: 100%;
  height: 100%;
  &-msg {
    width: 100%;
  }
  &-form {
    &-title {
      color: #303133;
      font-weight: 700;
      margin: 20px 0;
    }
  }
  &-operation {
    text-align: center;
  }
}
</style>
